<template>
  <base-layout>
    <div class="page-container">
      <!-- 顶部卡片 -->
      <a-card class="header-card">
        <div class="header-content">
          <div class="left">
            <h2 class="page-title">成就详情</h2>
            <span class="desc">查看学生提交的成就详细信息</span>
          </div>
          <div class="header-right">
            <a-space>
              <template v-if="achievement.status === 'pending'">
                <a-button type="primary" @click="handleApprove">
                  <template #icon><check-outlined /></template>
                  通过
                </a-button>
                <a-button danger @click="handleReject">
                  <template #icon><close-outlined /></template>
                  驳回
                </a-button>
              </template>
              <a-button @click="$router.back()">返回</a-button>
            </a-space>
          </div>
        </div>
      </a-card>

      <!-- 详情内容 -->
      <a-row :gutter="24">
        <a-col :span="16">
          <!-- 基本信息 -->
          <a-card class="detail-card" title="基本信息">
            <a-descriptions :column="2">
              <a-descriptions-item label="成就名称">{{ achievement.name }}</a-descriptions-item>
              <a-descriptions-item label="学生姓名">{{ achievement.studentName }}</a-descriptions-item>
              <a-descriptions-item label="学号">{{ achievement.studentId }}</a-descriptions-item>
              <a-descriptions-item label="类型">
                <a-tag :color="getTypeColor(achievement.type)">{{ achievement.type }}</a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="子类型">{{ achievement.subType }}</a-descriptions-item>
              <a-descriptions-item label="具体类型">{{ achievement.thirdType }}</a-descriptions-item>
              <a-descriptions-item label="获得时间">{{ achievement.achieveTime }}</a-descriptions-item>
              <a-descriptions-item label="提交时间">{{ achievement.submitTime }}</a-descriptions-item>
              <a-descriptions-item label="状态" :span="2">
                <a-tag :color="getStatusColor(achievement.status)">
                  {{ getStatusText(achievement.status) }}
                </a-tag>
              </a-descriptions-item>
              <a-descriptions-item label="成就说明" :span="2">
                {{ achievement.description }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>

          <!-- 证明材料 -->
          <a-card class="detail-card" title="证明材料">
            <div class="file-preview">
              <div class="file-item">
                <file-outlined class="file-icon" />
                <span class="file-name">{{ achievement.fileName }}</span>
                <div class="file-actions">
                  <eye-outlined class="preview-icon" @click="handlePreview" />
                  <download-outlined class="download-icon" @click="handleDownload" />
                </div>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="8">
          <!-- 审核记录 -->
          <a-card class="detail-card" title="审核记录">
            <a-timeline>
              <a-timeline-item v-if="achievement.reviewTime">
                <template #dot>
                  <check-circle-outlined style="color: #52c41a" />
                </template>
                <div class="timeline-content">
                  <div class="timeline-title">{{ achievement.reviewerName }} 审核通过</div>
                  <div class="timeline-time">{{ achievement.reviewTime }}</div>
                  <div class="timeline-comment" v-if="achievement.reviewComment">
                    {{ achievement.reviewComment }}
                  </div>
                </div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>
                  <clock-circle-outlined style="color: #1890ff" />
                </template>
                <div class="timeline-content">
                  <div class="timeline-title">{{ achievement.studentName }} 提交成就</div>
                  <div class="timeline-time">{{ achievement.submitTime }}</div>
                </div>
              </a-timeline-item>
            </a-timeline>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 审核对话框 -->
    <a-modal
      v-model:visible="reviewModal.visible"
      :title="reviewModal.type === 'approve' ? '通过审核' : '驳回原因'"
      @ok="handleReviewSubmit"
      :confirmLoading="reviewModal.loading"
      okText="确定"
      cancelText="取消"
    >
      <a-form :model="reviewModal.form">
        <a-form-item v-if="reviewModal.type === 'reject'" label="驳回原因" :rules="[{ required: true, message: '请输入驳回原因' }]">
          <a-textarea
            v-model:value="reviewModal.form.reason"
            :rows="4"
            placeholder="请输入驳回原因，将通知给学生"
          />
        </a-form-item>
        <a-form-item label="审核备注" :rules="[{ required: false }]">
          <a-textarea
            v-model:value="reviewModal.form.comment"
            :rows="3"
            placeholder="可选填写审核备注"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 预览弹窗 -->
    <a-modal
      v-model:visible="previewModal.visible"
      :title="achievement.fileName"
      :footer="null"
      width="800px"
      @cancel="closePreview"
    >
      <div class="preview-content">
        <!-- 图片预览 -->
        <img
          v-if="isImageFile(achievement.fileName)"
          :src="achievement.fileUrl"
          class="preview-image"
          alt="预览图片"
        />
        <!-- PDF预览 -->
        <iframe
          v-else-if="isPdfFile(achievement.fileName)"
          :src="achievement.fileUrl"
          class="preview-pdf"
        ></iframe>
        <!-- 其他文件类型 -->
        <div v-else class="preview-unsupported">
          <file-outlined class="unsupported-icon" />
          <p>该文件类型暂不支持预览，请下载后查看</p>
          <a-button type="primary" @click="handleDownload">
            下载文件
          </a-button>
        </div>
      </div>
    </a-modal>
  </base-layout>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import {
  CheckOutlined,
  CloseOutlined,
  DownloadOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  FileOutlined,
  EyeOutlined
} from '@ant-design/icons-vue'

export default {
  name: 'AchievementDetail',
  components: {
    BaseLayout,
    CheckOutlined,
    CloseOutlined,
    DownloadOutlined,
    CheckCircleOutlined,
    ClockCircleOutlined,
    FileOutlined,
    EyeOutlined
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const achievement = ref({})
    const reviewModal = reactive({
      visible: false,
      type: 'approve', // 'approve' | 'reject'
      loading: false,
      form: {
        reason: '',
        comment: ''
      }
    })
    const previewModal = reactive({
      visible: false
    })

    // 获取成就详情
    const fetchAchievementDetail = async () => {
      try {
        // 模拟API调用
        achievement.value = {
          id: route.params.id,
          studentName: '张三',
          studentId: '2021001',
          name: 'CET-6 优秀成绩',
          type: '证书',
          subType: 'CET-6',
          thirdType: '550分以上',
          achieveTime: '2024-03-10',
          submitTime: '2024-03-15 14:30:00',
          status: 'pending',
          description: '在2024年3月份全国大学英语六级考试中取得优异成绩，总分552分。',
          fileName: 'CET6-成绩单.pdf',
          fileUrl: 'https://example.com/cet6.pdf'
        }
      } catch (error) {
        message.error('获取成就详情失败')
      }
    }

    const getTypeColor = (type) => {
      const colors = {
        '证书': 'blue',
        '竞赛': 'green',
        '软著': 'purple',
        '影片': 'orange',
        '读书': 'cyan',
        '活动': 'magenta'
      }
      return colors[type] || 'default'
    }

    const getStatusColor = (status) => {
      const colors = {
        'pending': 'warning',
        'approved': 'success',
        'rejected': 'error'
      }
      return colors[status] || 'default'
    }

    const getStatusText = (status) => {
      const texts = {
        'pending': '待审核',
        'approved': '已通过',
        'rejected': '已驳回'
      }
      return texts[status] || status
    }

    const handleApprove = () => {
      reviewModal.type = 'approve'
      reviewModal.form.reason = ''
      reviewModal.form.comment = ''
      reviewModal.visible = true
    }

    const handleReject = () => {
      reviewModal.type = 'reject'
      reviewModal.form.reason = ''
      reviewModal.form.comment = ''
      reviewModal.visible = true
    }

    const handleReviewSubmit = async () => {
      if (reviewModal.type === 'reject' && !reviewModal.form.reason.trim()) {
        message.error('请输入驳回原因')
        return
      }

      reviewModal.loading = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        const actionText = reviewModal.type === 'approve' ? '通过' : '驳回'
        message.success(`审核${actionText}成功`)
        reviewModal.visible = false
        router.back()
      } catch (error) {
        message.error(`审核${actionText}失败`)
      } finally {
        reviewModal.loading = false
      }
    }

    const isImageFile = (fileName) => {
      return fileName && /\.(jpg|jpeg|png|gif|webp)$/i.test(fileName)
    }

    const isPdfFile = (fileName) => {
      return fileName && /\.pdf$/i.test(fileName)
    }

    const handlePreview = () => {
      previewModal.visible = true
    }

    const closePreview = () => {
      previewModal.visible = false
    }

    const handleDownload = () => {
      // 创建一个临时链接来下载文件
      const a = document.createElement('a')
      a.href = achievement.value.fileUrl
      a.download = achievement.value.fileName
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }

    onMounted(() => {
      fetchAchievementDetail()
    })

    return {
      achievement,
      reviewModal,
      previewModal,
      getTypeColor,
      getStatusColor,
      getStatusText,
      handleApprove,
      handleReject,
      handleReviewSubmit,
      isImageFile,
      isPdfFile,
      handlePreview,
      closePreview,
      handleDownload
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.header-card {
  margin-bottom: 24px;
  border-radius: 8px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content .left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.detail-card {
  margin-bottom: 24px;
  border-radius: 8px;
}

.file-preview {
  padding: 16px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #fafafa;
  border-radius: 4px;
}

.file-icon {
  color: #8c8c8c;
  margin-right: 8px;
}

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.preview-icon,
.download-icon {
  cursor: pointer;
  padding: 4px;
}

.preview-icon {
  color: #1890ff;
}

.preview-icon:hover {
  color: #40a9ff;
}

.download-icon {
  color: #52c41a;
}

.download-icon:hover {
  color: #73d13d;
}

.preview-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: #f0f2f5;
  border-radius: 4px;
  padding: 16px;
}

.preview-image {
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
}

.preview-pdf {
  width: 100%;
  height: 600px;
  border: none;
}

.preview-unsupported {
  text-align: center;
  padding: 32px;
}

.unsupported-icon {
  font-size: 48px;
  color: #8c8c8c;
  margin-bottom: 16px;
}

.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-title {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

.timeline-time {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.timeline-comment {
  margin-top: 8px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
}

:deep(.ant-descriptions-item-label) {
  color: rgba(0, 0, 0, 0.65);
  font-weight: 500;
}

:deep(.ant-card-head-title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.ant-modal-body) {
  padding: 0;
}
</style> 